var imgs=[
    //{"i":0,"img":"../img/8.jpg"},
    //{"i":1,"img":"../img/9.jpg"},
    //{"i":2,"img":"../img/10.jpg"},
    //{"i":3,"img":"../img/rose.jpg"}
];
var adv={
    LIWIDTH:0,//保存每个li的宽度
    DISTANCE:0,//保存总距离
    DURATION:1000,//保存总时间
    STEPS:200,//保存总步数
    interval:0,//保存步频
    step:0,//保存步长
    moved:0,//保存已经移动的位移
    timer:null,//保存定时器序号
    WAIT:3000,//自动轮播等待的时间
    canAuto:true,//标识是否可以启动自动轮播
    getImgs:function(){
        var imgsArr=$("#imgs img");
        for(var i=0;i<imgsArr.length;i++){
            imgs.push({"i":i,"img":imgsArr[i].src});
        }
    },
    init:function(){//初始化方法
        //todo 获得id为slider的div的宽,保存在LIWIDTH中
        this.LIWIDTH=parseFloat(getComputedStyle($('#slider')[0]).width);
        //todo 计算interval: DURATION/STEPS
        this.interval=this.DURATION/this.STEPS;
        this.updateView();//todo 更新页面
        //为id为indexs的ul绑定鼠标进入事件为function
        $("#indexs").on("mouseover",
            function(e){
                var target=e.target;//获得target
                //如果target是li
                if(target.nodeName=="LI"){
                    //求n: target的内容-id为indexs下class为hover的元素的内容
                    var n=target.innerHTML-$("#indexs>.hover")[0].innerHTML;
                    this.move(n);//调用move(n)//当不绑定this时，this指的是$("#indexs")
                }
            }.bind(this)//绑定this为adv
        );
        this.autoMove();
        $("#slider").on("mouseover",function(){
            this.canAuto=false;//this指的是slider
        }.bind(this));
        $("#slider").on("mouseout",function(){
            this.canAuto=true;//this指的是slider
        }.bind(this));//绑定this，使其指向adv
        ////todo 左右箭头控制图片前进后退
        //$('.photo_box span').on('click',function(){
        //    if(this.getAttribute('data-change')=="+"){
        //        adv.move(1);
        //    }else{
        //        adv.move(-1);
        //    }
        //})
    },
    updateView:function(){
        //todo 遍历imgs中每个元素,同时声明空字符串htmlImgs
        for(var i= 0,htmlImgs="",htmlIndexs="";i<imgs.length;i++){
            //向htmlImgs中拼接一个<li><img src="当前元素的img属性"></li>
            htmlImgs+='<li style=width:'+this.LIWIDTH+"px"+'><img src='+imgs[i].img+'></li>';
            htmlIndexs+="<li>"+(i+1)+"</li>";
        }
        //todo 设置id为imgs的元素的内容为htmlImgs
        $('#imgs')[0].innerHTML=htmlImgs;
        //todo 设置id为imgs的元素的宽为LIWIDTH*imgs的元素个数
        $('#imgs')[0].style.width=this.LIWIDTH*imgs.length+"px";
        //todo 设置id为indexs的元素的内容为htmlIdxs
        $("#indexs")[0].innerHTML=htmlIndexs;
        //todo 找到id为indexs下所有li中和imgs数组第一个元素的i属性标示的位置相同的li，设置其class为hover
        $("#indexs>li")[imgs[0].i].className="hover";
        //todo 监听浏览器窗口大小变化
        $(window).resize(function(){
            $("#imgs li").css("width",$("#slider").width()+"px");
        })
    },
    autoMove:function(){
        this.timer=setTimeout(
            function(){
                if(this.canAuto){this.move(1)}//回调函数this一律指window
                else{this.autoMove()}
            }.bind(this)
            ,this.WAIT);
    },
    move:function(n){//启动一次移动
        //停止动画，清除timer-防止动画叠加
        clearInterval(this.timer);
        this.timer=null;
        if(n<0){//如果右移
            //删除imgs结尾的n个元素，拼接到imgs开头
            imgs=imgs.splice(imgs.length+n,-n).concat(imgs);
            this.updateView();//更新页面
            //获得id为imgs的ul的left
            var left=parseFloat(
                getComputedStyle($("#imgs")[0]).left
            );
            //计算start:left-this.LIWIDTH*n;
            var start=left-this.LIWIDTH*(-n);
            //设置id为imgs的ul的left为left-LIWIDTH*n
            $("#imgs")[0].style.left=start+"px";
            var end=0;
        }else{//如果左移
            //获得id为imgs的ul的left，保存在变量start中
            var start=parseFloat(
                getComputedStyle($("#imgs")[0]).left
            );
            //用-LIWIDTH*n，保存在变量end中
            var end=-this.LIWIDTH*n;
        }
        //求DISTANCE: -(end-start)
        this.DISTANCE=-(end-start);
        //求step:DISTANCE/STEPS
        this.step=this.DISTANCE/this.STEPS;
        //启动周期性定时器: moveStep，间隔interval，序号保存在timer中
        this.timer=setInterval(
            this.moveStep.bind(this,n),this.interval
        );
    },
    moveStep:function(n) {//移动一步
        //获得id为imgs的ul的left
        var left = parseFloat(
            getComputedStyle($("#imgs")[0]).left
        );
        //设置id为imgs的ul的left为left-step
        $("#imgs")[0].style.left = left - this.step + "px";
        this.moved++;//moved+1
        //如果moved==STEPS
        if (this.moved == this.STEPS) {//移动结束
            //停止定时器，清除timer, moved归0
            clearInterval(this.timer);
            this.timer = null;
            this.moved = 0;
            if (n > 0) {//如果左移
                //删除数组开头的n个元素，拼接到结尾
                imgs = imgs.concat(imgs.splice(0, n));
                this.updateView();//更新界面:
            }
            //清除id为imgs的left
            $("#imgs")[0].style.left = "";
            this.autoMove();
        }
    },
    arrawClick:function(){

    }
}
adv.getImgs();
adv.init();